<template>
  <div class="settings content">
    <el-card>
      <!-- 查
        1：定义获取角色列表api
        2:导入，调用，获取数据并渲染
        3：完成分页处理
        增
        1:新增绑定点击事件
        2：创建一个基本新增组件
        3：在公司设置页面，导入注册使用
        4：新增事件中显示弹框
        5：完善新新增布局
        6：完成新增弹框的表单验证
        7：新增接口处理
           新增api定义，
           新增api的调用与处理
        删
        1：删除按钮绑定点击事件
        2：在点击事件中来一个确定弹框
        3：定义一个删除api方法
        4：导入调用，并传入相应参数
        5：在删除成功后，提示一下，刷新列表数据（一般回到第一页）
        改:
        1:修改按钮绑定相应事件
        2:修改按钮事件
           a:打开新增组件弹框
           b:将当前行数据传递给新增组件(数据需要深拷贝)
             注意:是否传递当前行数据还是调用接口取决于当前行数据是否完整
           c:传递一个变量值用于区分是新增还是编辑
        3:看表单验证是否需要调整
        4:定义编辑api
        5:点击确定按钮时,分场景调用(新增/编辑)
          a:提示一下
          b:关闭弹窗
          c:清除表单验证信息与清空表单数据
          d:刷新父级列表数据











        -->

      <el-tabs>
        <el-tab-pane label="角色管理" lazy>
          <el-button type="primary" @click="addRoleClick">
            +新增角色
          </el-button>
          <!-- table 
          el-table
              data:用于数据绑定，[]
              el-table-column 每一列
                  prop="绑定该列对应的字段名"
                  label:该列的标题
                  自定义列：作用域插槽
                      v-slot="scope:{$index:当前行的索引，row:当前行数据}"        
          -->
          <el-table :data="tableData">
            <el-table-column label="序号">
              <!-- 
                  已知：page.page,page.pagesize  $index   真实序号：从1开始
                           2          5            0                   6
                                                                当前页面的前一页一定是完整的
                                                           (page.page-1)*page.pagesize+$index+1                 

               -->
              <template v-slot="{ $index }">
                {{ (page.page - 1) * page.pagesize + $index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="角色名" prop="name"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <div>
                  <!-- 
                  分配权限：（这是一个编辑功能）
                     1：创建一个基本的权限弹框
                     2：点击分配权限显示弹框
                     3：完成基本结构 
                     4：获取数据
                     5：转换数据成树形结构 并渲染
                     6：处理默认勾选（通过id获取当前角色所有的权限页面勾选上）
                        如果当前行数据包含权限数据就不需要调用接口
                        如果不包含就调用接口
                     7：实现修改分配权限
                        定义修改api
                        导入使用

                   -->

                  <el-button type="text" @click="setPower(row)"
                    >分配权限</el-button
                  >
                  <el-button type="text" @click="edit(row)">修改</el-button>
                  <el-button type="text" style="color:#ccc;" @click="del(row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <!-- 
                current-page:默认显示的页码
                 page-sizes：页容量选项
                 page-size：默认的页容量
                layout:配制组件的相应功能模块 
                total:总数（数据总条数）
                @size-change:页容量改变
                @current-change：页码改变时的回调
               -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.page"
              :page-sizes="[1, 10, 100, 200, 300, 400]"
              :page-size="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" lazy>
          <info></info>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 新增弹框组件 
    子组件标签  属性名.sync="父组件变量"
    子组件内：  props:[‘属性名’]
             this.$emit('update:属性名',实参值)
    
    -->
    <add ref="add" :isShow.sync="show" @getData="getData"></add>
    <!-- 分配权限弹框 -->
    <Power ref="power" @getData="getData"></Power>
  </div>
</template>
<script>
import info from './components/info.vue'
import { sysRole, sysRoleDel } from '@/api/settings'
import add from './components/add.vue'
import Power from './components/power.vue'
export default {
  components: {
    info,
    add,
    Power
  },
  data () {
    return {
      show: false, // 控制新增组件是否显示
      tableData: [],
      page: {
        total: 10,
        pagesize: 10,
        page: 1
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await sysRole(this.page)
      this.tableData = res.rows
      this.page.total = res.total
      window.console.log('角色列表数据：', res)
    },
    // 页容量改变
    handleSizeChange (size) {
      this.page.pagesize = size
      this.page.page = 1
      this.getData()
    },
    // 页码改变
    handleCurrentChange (page) {
      this.page.page = page
      this.getData()
      //   window.console.log('页码改变:', page, this.page.page)
    },
    // 新增角色点击事件
    addRoleClick () {
      this.show = true
      // this.$refs.add.mode = 'add'
    },
    // 删除
    del (row) {
      //   window.console.log('当前行数据', row)
      this.$confirm('您确定删除该角色吗？', '温馨提示', {
        type: 'warning'
      }).then(async () => {
        await sysRoleDel(row.id)
        this.$message.success('删除成功')
        this.page.page = 1
        this.getData()
      })
    },
    // 编辑
    edit (row) {
      this.show = true
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.mode = 'edit'
    },
    // 分配权限
    setPower (row) {
      this.$refs.power.isShow = true
      this.$refs.power.getRoleInfo(row.id)
    }
  }
}
</script>
<style lang="scss" scoped>
.settings {
  .page {
    padding: 35px 0 0;
    text-align: right;
  }
}
</style>
